前言

在飲料魔法學院裡，每一個元件（Component）都不是靜止的存在。
它們誕生於魔法師的召喚（onMounted），在運行中感受能量波動（watch / watchEffect），
最後在結束時歸於靜寂（onUnmounted）。

這些過程合稱為「Vue 的生命週期（Lifecycle Hooks）」，
是每一位前端魔法師必須熟記的法術節奏。

今天的學習目標是──
讓我們不只是寫出「會動」的元件，
而是能理解「它何時開始運作、何時該停止魔力」的節奏。

一、魔法生命師法順序：理解元件的誕生與消逝

使用者故事（User Story）

🧙‍ 魔法原則：「每一段魔法都應該有開啟與關閉的時刻」
若你只學會召喚，卻忘記解除，那就是不完全的魔法師。

為什麼生命週期很重要？

生命週期就像元件的呼吸與心跳。
若你在錯誤的時間點執行請求、操作 DOM 或監聽事件：

• 資料可能還沒載入完畢，導致渲染失敗
• 頁面切換後仍執行 setInterval → 記憶體洩漏
• 💥 watch 寫錯會導致無限循環或效能暴衝

Vue 的生命週期階段圖（魔法師的修行路）

1. setup() — 魔力的源頭
   宣告 reactive / ref、注入 store，設定所有初始能量。
   → 此時元件尚未渲染，但狀態樹已生成。

2. onBeforeMount — 魔力聚集
   DOM 尚未出現在畫面中。可以在這裡做最後預備或初始判斷。

3. onMounted — 魔力實體化
   元件正式出現在頁面上！這時候才能安全地操作 DOM、呼叫 API、啟動監聽。

4. onBeforeUpdate / onUpdated — 魔力流動與再結構
   資料改變 → 頁面要重新渲染。
   在 onBeforeUpdate 先暫停舊能量（如清除動畫），
   在 onUpdated 再重新開啟（例如重啟動畫或更新視覺效果）。

5. onBeforeUnmount / onUnmounted — 魔法的歸寂
   元件即將消失，釋放所有監聽器、計時器與全域綁定，
   否則殘留的魔力（setInterval、window 事件）可能導致錯誤或記憶體洩漏。

💡 這張圖的重點是：「State 隨生命週期的變化流動」
你不只是知道函式何時執行，而是理解資料與 DOM 的「生滅節奏」。

流程說明（文字搭配 Flowchart 一起用）

二、實作：任務看板的魔法生命軌跡

我們以一個小元件「任務觀測水晶」為例，
它會在誕生時載入任務、在過程中監看變化、最後清除魔法能量。

今天我們就以輕鬆的角度來看vue的生命週期

TaskWatcher.vue

<script setup>
import { ref, onMounted, onUnmounted, watchEffect } from 'vue'

const tasks = ref([])
const loading = ref(true)
let intervalId = null

//  召喚階段：載入初始資料
onMounted(() => {
  console.log(' onMounted: 任務觀測水晶啟動')
  loadTasks()
  // 每 5 秒刷新資料
  intervalId = setInterval(loadTasks, 5000)
})

// 👁 持續觀測能量流動
watchEffect(() => {
  if (tasks.value.length > 5) {
    console.log(' 偵測到任務過多，請儘快處理！')
  }
})

// 🌫 結界解除階段
onUnmounted(() => {
  console.log(' onUnmounted: 清除計時器與魔力痕跡')
  clearInterval(intervalId)
})

function loadTasks() {
  loading.value = true
  setTimeout(() => {
    // 模擬 API 載入
    tasks.value = [
      { id: 1, name: '調配草莓拿鐵' },
      { id: 2, name: '修復冰魔法陣' },
      { id: 3, name: '訓練新學徒' },
    ]
    loading.value = false
  }, 800)
}
</script>

<template>
  <div class="task-crystal">
    <h3>任務觀測水晶</h3>
    <p v-if="loading"> 正在觀測任務流...</p>
    <ul v-else>
      <li v-for="task in tasks" :key="task.id">
        {{ task.name }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.task-crystal {
  border: 2px solid #a78bfa;
  border-radius: 12px;
  padding: 1em;
  background: #faf5ff;
}
</style>

📜 實作對應的生命週期階段

三、任務運作時序圖（Vue 元件的一生）

四、總結：魔法師的呼吸節奏

• onMounted → 元件出生，召喚魔力
• watch / watchEffect → 監控能量流動
• onUnmounted → 回收魔法、清理戰場

建議修煉方向：

1. 在專案中為每個重要元件建立「生命週期日誌」，記錄進出時間。
2. 在資料請求（API）與事件監聽（scroll、resize）中，務必在 onUnmounted 解除。
3. 若元件間需要通訊，利用 emit 或 Pinia 讓狀態同步，而不是直接操作 DOM。
4. 進一步可以嘗試 onBeforeUpdate、onUpdated，觀察畫面更新時的節奏。

今日成就解鎖

你學會了「Vue 的呼吸術」，
讓每個元件都能在正確的時間呼吸、觀測與歸靜。

今天算是一個過度，但是重要的章節

因為一個程式或是套件的生命週期特別重要

你才會知道他在哪邊呼叫或是使用~

必秒造成問題~

今天的概念學習完後我們就可以規劃最後一章的內容了(主要是會補實戰的一些技巧vue CICD config或是i18n)